<template>
	<view class="attendance">
		<view v-if="leader == '1'" class="attendance-top">
			<g-tabs-top :list="typeList" v-model:current="queryParams.userType" square boxShadow :scroll="false"
				@change="resetQuery" />
			<uv-icon v-if="queryParams.userType == 1" :name="iconFilter" class="attendance-icon" @click="popupShow" />
		</view>
		<g-month-calendar show-back :dot-list="dotList" :watermark="false" @selected-change="changeDate"
			@days-change="daysChange" />
		<view v-for="(i, k) in dataList" :key="k" class="attendance-item" :style="{
        '--statusColor': i.type == 1 ? '#f5f3eb' : '#EBF5EE',
      }" @click="handleRecord(i)">
			<view class="attendance-row">
				<view class="attendance-row-left ss-flex-col ss-row-between">
					<view class="ss-flex ss-flex-1">
						<view class="operator">{{ i.createUserNickName }}</view>
						<view class="post-tag">{{ enumUserType(i.createUserType) }}</view>
					</view>
					<view class="ss-flex">
						<view class="task">{{ i.projectName }}</view>
						<view class="card-tag" :class="{ 'end-tag': i.type == 2 }">
							{{ i.type == 1 ? "启动卡" : "结束卡" }}
						</view>
					</view>
				</view>
				<uv-avatar :src="webSrc(i.createUserAvatar)" size="106rpx" />
			</view>
			<uv-text :text="i.address" :lines="1" prefix-icon="map-fill" size="28rpx" :icon-style="{
          fontSize: '28rpx',
          color: '#4EA770',
          marginRight: '18rpx',
        }" line-height="70rpx" />
			<uv-text :text="i.createTime" color="#212121" size="28rpx" line-height="70rpx" />
		</view>
		<uv-load-more v-if="dataList.length > 0" :status="status" line />
		<uv-empty v-else margin-top="20vh" :icon="empty" text="没有打卡记录" />
		<uv-popup ref="popupRef" mode="right" z-index="980" closeable>
			<view class="popup-content">
				<uv-status-bar />
				<uv-text text="数据筛选" color="#757575" size="28rpx" line-height="100rpx" margin="auto 30rpx" />
				<uv-text text="打卡状态" color="#757575" size="28rpx" line-height="80rpx" margin="auto 30rpx" />
				<view class="row">
					<view class="row-btn" v-for="(i, k) in statusList" :key="k"
						:class="{ active: i.value == queryParams.type }" @click="queryParams.type = i.value">
						{{ i.label }}
					</view>
				</view>
				<uv-text text="参与人员" color="#757575" size="28rpx" line-height="80rpx" margin="auto 30rpx" />
				<view class="date-box" @click="showUser">
					{{ getUserName(queryParams.userId) }}
				</view>
				<view class="row-bottom">
					<uv-button text="重置" @click="resetQuery" />
					<uv-button text="确定" color="#fff" :custom-style="{
              background: '#4EA770',
            }" @click="handleQuery" />
				</view>
			</view>
		</uv-popup>
		<uv-picker ref="userRef" round="20rpx" :columns="userList" key-name="userNickName" confirm-color="#4EA770"
			@confirm="confirmUser" />
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		watch
	} from "vue";
	import {
		webSrc,
		timeFormat,
		enumUserType
	} from "@/common/mothed.js";
	import {
		getClockInMarkList,
		getSubInMarkList,
		getClockInList,
		getSubClockInList,
		getSubordinates,
	} from "@/request/home.js";
	import empty from "@/static/empty.png";
	import iconFilter from "@/static/icon_filter.png";

	const props = defineProps({
		// 是否下拉刷新
		refresh: {
			type: Boolean,
			default: false,
		},
		// 上拉加载
		onMore: {
			type: Boolean,
			default: false,
		},
		// 是否为负责人
		leader: {
			type: String,
			default: "",
		},
	});

	const emit = defineEmits(["onRefresh", "onReach"]);

	const beginTime = ref(); // 本周开始时间
	const endTime = ref(); // 本周结束时间
	const dotList = ref([]); // 点标记
	const queryParams = ref({
		time: timeFormat(Number(new Date())), // 当前日期
		userType: 0, // 类型
		userId: "", // 下属人员ID
		pageNum: 1, // 当前页码
		pageSize: 20, // 每页条数
		type: null, // 1启动卡 2结束卡
	});
	const statusList = ref([
		// 日程状态
		{
			label: "全部",
			value: null
		},
		{
			label: "启动卡",
			value: 1
		},
		{
			label: "结束卡",
			value: 2
		},
	]);
	const typeList = ref([{
		label: "我的打卡"
	}, {
		label: "下属打卡"
	}]);
	const userRef = ref(); // 人员弹窗ref
	const popupRef = ref(); // 筛选弹窗ref
	const userList = ref([
		[]
	]); // 下级人员列表
	const total = ref(0); // 总条数
	const dataList = ref([]); // 数据列表
	const status = ref("loadmore"); // 加载状态

	onMounted(() => {
		getList();
	});

	watch(
		props,
		(v) => {
			if (v.refresh) {
				setTimeout(() => {
					queryParams.value.pageNum = 1;
					getList();
				}, 0);
			}
			if (v.onMore) {
				if (total.value > dataList.value.length) {
					queryParams.value.pageNum += 1;
					getList();
				}
			}
		}, {
			immediate: true,
			deep: true,
		}
	);

	// 获取打卡记录
	const getList = () => {
		status.value = "loading";
		let request = queryParams.value.userType == 0 ? getClockInList : getSubClockInList;
		request(queryParams.value)
			.then((res) => {
				if (res.code == 200) {
					dataList.value =
						queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
					total.value = res.total;
				}
			})
			.finally(() => {
				emit("onRefresh", false);
				uni.stopPullDownRefresh();
				status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
				if (props.onMore) emit("onReach", false);
			});
	};

	// 获取点标记列表
	const getMarks = () => {
		let request = queryParams.value.userType == 0 ? getClockInMarkList : getSubInMarkList;
		request({
			beginTime: beginTime.value,
			endTime: endTime.value,
		}).then((res) => {
			dotList.value = res.data;
		});
	};

	// 选择日期
	const changeDate = (date) => {
		queryParams.value.time = date;
		queryParams.value.pageNum = 1;
		getList();
	};

	// 日期范围
	const daysChange = (date) => {
		beginTime.value = timeFormat(Number(date.start));
		endTime.value = timeFormat(Number(date.end));
		getMarks();
	};

	// 查看打卡记录
	const handleRecord = (item) => {
		uni.openLocation({
			latitude: item.latitude,
			longitude: item.longitude,
		});
	};

	// 打开筛选弹窗
	const popupShow = () => {
		popupRef.value.open();
	};

	// 获取人员名称
	const getUserName = (id) => {
		let row = userList.value[0]?.find((item) => item.userId == id);
		return row ? row.userNickName : "请选择人员";
	};

	// 显示选择人员弹窗
	const showUser = () => {
		getuserList();
		userRef.value.open();
	};

	// 下属人员列表
	const getuserList = () => {
		getSubordinates().then((res) => {
			if (res.code == 200) {
				userList.value[0] = res.data;
			}
		});
	};

	// 确认人员
	const confirmUser = (e) => {
		queryParams.value.userId = e.value[0].userId;
	};

	// 重置查询
	const resetQuery = () => {
		queryParams.value.type = null;
		queryParams.value.userId = "";
		queryParams.value.pageNum = 1;
		popupRef.value.close();
		getList();
		getMarks();
	};

	// 确认查询
	const handleQuery = () => {
		popupRef.value.close();
		queryParams.value.pageNum = 1;
		getList();
	};
</script>
<style lang="scss" scoped>
	.attendance {
		width: auto;
		margin: 30rpx 40rpx;
		border-radius: 20rpx;

		.attendance-top {
			margin: 0 20rpx;
			position: relative;

			.attendance-icon {
				position: absolute;
				right: 30rpx;
				top: 26rpx;
				z-index: 99;
			}
		}

		.attendance-item {
			--statusColor: #f5f3eb;
			width: auto;
			height: 282rpx;
			background: #fff;
			box-shadow: 0 0 20rpx 2rpx rgba(33, 33, 33, 0.16),
				inset 0 -40rpx 64rpx 2rpx var(--statusColor);
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			border: 2rpx solid #fff;
			margin-bottom: 30rpx;

			.attendance-row {
				display: flex;
				justify-content: space-between;

				&-left {
					max-width: 480rpx;
					flex: 1;

					view {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.operator {
						max-width: 230rpx;
						font-size: 36rpx;
						color: #212121;
					}

					.post-tag {
						min-width: 200rpx;
						font-size: 24rpx;
						color: #757575;
						margin-left: 30rpx;
					}

					.task {
						max-width: 350rpx;
						font-size: 24rpx;
						color: #212121;
					}

					.card-tag {
						width: 72rpx;
						font-size: 24rpx;
						color: #f1a82a;
						padding: 2rpx 10rpx;
						background: #fffbf5;
						border-radius: 8rpx;
						margin-left: 22rpx;
					}

					.end-tag {
						color: #4ea770;
						background: #f5fff8;
					}
				}
			}
		}

		.popup-content {
			width: 600rpx;
			height: 100%;
			position: relative;

			.row {
				display: grid;
				gap: 20rpx;
				grid-template-columns: repeat(3, 1fr);
				padding: 0 30rpx;
				margin-bottom: 40rpx;

				&-btn {
					width: 160rpx;
					height: 66rpx;
					border-radius: 8rpx;
					background-color: #fff;
					border: 2rpx solid #dedede;
					font-size: 28rpx;
					color: #757575;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.active {
					color: #fff;
					background-color: #4ea770;
					border: 2rpx solid #4ea770;
				}
			}

			.date-box {
				height: 66rpx;
				padding: 12rpx;
				box-sizing: border-box;
				margin: auto 30rpx;
				background: #ffffff;
				border-radius: 8rpx;
				border: 2rpx solid #dedede;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #bdbdbd;
			}

			.row-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;

				view {
					flex: 1;
				}
			}
		}
	}

	:deep(.uv-popup__content__close--top-right) {
		top: calc(15px + var(--status-bar-height)) !important;
	}
</style>